<template>
    <div class="content">
        <el-card shadow="never">
            <e-row type="flex" justify="space-between">
                <el-form ref="searchForm" :model="searchForm" size="small" class="demo=form-inline" inline>
                    <el-form-item label="课程名称" prop="name">
                        <el-input v-model.trim="searchForm.name" placeholder="请输入课程信息"></el-input>
                    </el-form-item>
                    <el-form-item label="课程编号" prop="id">
                        <el-input v-model.trim="searchForm.id" placeholder="请输入课程编号"></el-input>
                    </el-form-item>
                    <el-form-item label="讲师" prop="lecturer">
                        <el-select v-model="searchForm.lecturer" placeholder="请选择讲师">
                            <el-option v-for="item in lecturerList" :key="item.name" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-foem-item>
                        <el-button  type="primary"
                                    icon="el-icon-search"
                                    size="small"
                                    @click="handleSearch()">查询</el-button>
                        <el-button  size="small"
                                    icon="el-icon-refresh-right"
                                    @click="handleClear()">重置</el-button>
                    </el-foem-item>
                </el-form>
            </e-row>
            <el-row class="rowSpace">
                <el-col :span="4">
                    <el-button type="primary" size="small" @click="changeView('/course/add')">
                        新增课程
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-radio-group size="small" @change="changeRadio($event)" v-model="searchForm.state">
                            <el-radio-button label="">全部</el-radio-button>
                            <el-radio-button label="0">已上架</el-radio-button>
                            <el-radio-button label="1">已下架</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
            <el-table ref="table" :data="tableData">
                <el-table-column type="index" label="序号" width="50" align="center"/>
                <el-table-column prop="name" label="课程名称" show-overflow-tooltip align="center"/>
                <el-table-column prop="code" label="课程编号" show-overflow-tooltip align="center"/>
                <el-table-column prop="nickname" label="课程封面" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-popover placement="right" trigger="hover">
                                <el-image
                                    style="height: 350px"
                                    :src="scope.row.courseUrl"
                                    fit="contain"></el-image>
                                    <el-image slot="reference" style="height: 100px" :src="scope.row.courseUrl" fit="contain">
                                </el-image>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="lecturer" label="课程讲师" show-overflow-tooltip align="center"/>
                <el-table-column prop="stateName" label="状态" show-overflow-tooltip align="center"/>
                <el-table-column label="操作" width="360px" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="showDetail(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" size="small" @click="deletecourse(scope.row.id)">
                            删除
                        </el-button>
                        <el-button type="warning" size="small" @click="changeCourseStatus(scope.row.id, 0)">
                            下架
                        </el-button>
                        <el-button type="primary" size="small" @click="changeCourseStatus(scope.row.id, 1)">
                            上架
                        </el-button>
                        <el-button size="small" @click="openDetail(scope.row.id)">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                class="pagination"
                layout="->,total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 20, 30, 40]"
                :current-page="searchForm.current"
                :page-size="searchForm.size"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <Detail ref="course_detail"></Detail>
        </el-card>

        <el-dialog title="课程管理" :visible.sync="dialogFormVisible" width="35%"> 
            <el-form :data="detailData" ref="detailData">
                <el-form-item label="课程名称:" prop="name"> 
                    <el-input v-model="detailData.name" placeholder="请输入课程名称" style="width: 250px;" size="small"></el-input>
                </el-form-item>
                <el-form-item label="课程编号:" prop="code"> 
                    <el-input v-model="detailData.code" placeholder="请输入课程编号" style="width: 250px;" size="small"></el-input>
                </el-form-item>
                <el-form-item label="课程讲师:" prop="lecturer"> 
                    <el-input v-model="detailData.lecturer" placeholder="请输入课程讲师" style="width: 250px;" size="small"></el-input>
                </el-form-item>
                <el-form-item label="课程状态:" prop="stateName"> 
                    <el-select v-model="detailData.stateName" placeholder="请选择课程状态" style="width: 250px;" size="small">
                        <el-option label="已上架" :value="'已上架'"></el-option>
                        <el-option label="已下架" :value="'已下架'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程封面：" prop="courseUrl">
                    <el-button type="text" @click="imgVisible = true">点击查看图片</el-button>

                    <el-dialog title="课程封面" :visible.sync="imgVisible" width="20%" append-to-body>
                            <div>
                                <el-popover placement="right" trigger="hover">
                                    <el-image
                                        style="height: 600px"
                                        :src="detailData.courseUrl"
                                        fit="contain"></el-image>
                                        <el-image slot="reference" style="height: 350px; width: 200px;" :src="detailData.courseUrl" fit="contain">
                                    </el-image>
                                </el-popover>
                            </div>
                    </el-dialog>

                </el-form-item>
                <el-form-item align="center">
                    <el-button size="small" @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" size="small" @click="dialogFormVisible = false">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import Detail from "../course/Detail.vue";
export default{
    components:{
        Detail
    },
    data(){
        return{
            detailData: {},
            dialogFormVisible: false,
            imgVisible: false,
            searchForm: {
                 current: 1,
                 size: 10,
                 name: '',
                 lecturer: '',
                 state: ''
            },
            tableData:[
                {
                    id:1,
                    name: "抽丝剥茧Vue源码",
                    code: "ZF00100",
                    sex: 1,
                    courseUrl: require("@/assets/img/courseurl.jpg"),
                    mobile: "19999999999",
                    stateName: "已上架",
                    lecturer: "JKenan",
                    state: 1
                }
            ],
            lecturerList: [
                {
                    id: 1,
                    name: "JKenam"
                }
            ]
        }
    },

    methods:{
        async getPageList(){
            const res = await this.$axios.get('/course/list', {
                params: this.searchForm
            })

            if(res.data.success){
                this.tableData = res.data.data.records
                this.total = res.data.data.total
            }else{
                this.$message.error(res.data.message)
            }
        },

        //切换tab
        changeRadio(val){
            this.searchForm.state = val
            this.getPageList()
        },

        //搜索
        handleSearch(){
            this.searchForm.current = 1;
            this.getPageList()
        },

        //重置
        handleClear(){
            this.$refs["searchForm"].resetFields()
            this.getPageList()
        },

        //切换每页显示条数
        handleSizeChange(val){
            this.searchForm.size = val
            this.searchForm.current = 1
            this.getPageList()
        },

        //点击某一页就跳转到那一页
        handleCurrentChange(val) {
            this.searchForm.current = val;
            this.getPageList();
        },
        changeCourseStatus(id, status) {
            let title = status == 0 ? "下架" : "上架";
            this.$confirm("确认要【" + title + "】该课程吗, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
            // 业务操作
            this.$axios
                .post("/course/changeStatus", {
                id: id,
                status: status,
                })
                .then((res) => {
                if (res.data.success) {
                    this.$message({ message: title + "成功！", type: "success" });
                } else {
                    this.$message.error(res.data.message);
                }
                });
            })
            .catch(() => {
            this.$message({
                type: "info",
                message: "已取消操作",
            });
            });
        },

        deletecourse(id){
            this.$confirm("确认要删除该课程吗？", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            }).then( () => {
                this.$axios.delete(url, {params: {id: id}})
            }).then( (res) => {
                if(res.data.success){
                    this.$message({ message: "删除成功", type: "success" })
                }else{
                    this.$message.error(res.data.message)
                }
            })

            .catch( () => {
                this.$message({
                    type: 'info',
                    message: "已取消删除"
                })
            })
        },

        openDetail(id){
            this.$refs.course_detail.drawer = true;
            this.$refs.course_detail.formData.id = id
            this.$refs.course_detail.getCourseDetail()
        },

        //详情嵌套表单
        showDetail(row){
            this.detailData = row
            this.dialogFormVisible = true
        },

        //路由跳转
        changeView(url, queryParams){
            this.$router.push({
                path: url,
                query: queryParams
            })
        }
    }
    
}

</script>


<style>
.content {
  margin: 20px 0px;
}

.el-table {
  margin: 20px 0px;
}

</style>